<template>
	<view v-if="visible" @click="closed" class="popup-bg" @touchmove.stop.prevent="moveHandle">
		<view class="popup-wrap flex-column-between" @click.stop="moveHandle">
			<view class="flex1 popup-content">
				<slot></slot>
			</view>
			<view class="flex-row-between footer">
				<view class="botton" @click="closed">取消</view>
				<view class="botton p-botton" @click="submit">{{confirmText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			isFooter:{
				type: Boolean,
				default: true
			},
			confirmText:{
				type: String,
				default: '确认'
			},
		},
		data(){
			return{
				visible:false
			}
		},
		methods:{
			open(){
				this.visible = true
			},
			closed(){
				this.$emit('beforeClose')
				this.visible = false
			},
			submit(){
				this.$emit('handleCheck')
			},
			// 禁止弹窗后滚动（就是一个空函数，不要意外）
			moveHandle(){},
		}
	}
</script>

<style scoped lang="scss">
/** 弹窗样式 **/
.popup-bg{
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
	.popup-wrap{
		z-index: 2;
		width: 500rpx;
		// min-height: 200rpx;
		background-color: #fff;
		// padding: 25rpx;
		border-radius: 8rpx;
		margin: 300rpx auto 0rpx;
		.popup-content{
			padding: 25rpx;
			width:100%;
		}
		.footer{
			width: 500rpx;
			padding: 20rpx 25rpx;
			border-top: 1rpx solid rgba(85,107,133,0.16);
		}
	}
}
</style>